<template>
  <view class="total-container">
    <view class="content">
      <view class="raw" v-for="(item, index) in subjectList" :key="index">
        <view class="subject">{{ item.subject }}</view>
        <!-- <view class="title">{{ item.title }}</view> -->
        <view class="type">{{ item.type }}</view>
        <view class="type">作者: {{ item.author }}</view>
        <view
          class="image"
          :style="{ backgroundImage: `url(${item.logo}}})` }"
          @click="previewImage(item.logo)"
        >
        </view>
      </view>
    </view>
    <view class="bottom">没有更多了哦</view>
  </view>
</template>

<script setup>
import { previewImage } from "@/utils/tool.js";

const subjectList = ref([
  {
    subject: "作品:工院派大星",
    title: "快递代取外卖跑腿",
    type: "快递代取 | 外卖 | 跑腿",
    author: "软件2303张向阳",
    logo: "https://pic.imgdb.cn/item/66dc21a4d9c307b7e9ebecab.jpg",
  },
  {
    subject: "作品:拾光锦汉服体验店",
    title: "汉服体验预约",
    type: "化妆造型 | 服装租赁 | 汉服摄影 | 贴心服务 | 一键预约",
    author: "软件2303张向阳  软件2203张欢乐",
    logo: "https://pic.imgdb.cn/item/66dd4603d9c307b7e9a8aa1c.jpg",
  },
  {
    subject: "作品:灵动养颜",
    title: "美容养颜一键预约",
    type: "美容 | 美甲 | 护理 | 一键预约",
    author: "软件2303白玉宇",
    logo: "https://pic.imgdb.cn/item/66dc32a8d9c307b7e903e9d9.png",
  },
]);
</script>
<script>
export default {
  name: "",
};
</script>

<style lang="scss" scoped>
.total-container {
  padding: 20rpx 40rpx;

  // reference：参考
  .content {
    margin-top: 15rpx;
    background-color: #fff;

    .raw {
      margin-bottom: 50rpx;

      .subject {
        // font-size: 36rpx;
        // font-weight: 900;
        padding: 10rpx 20rpx;
        margin-bottom: 15rpx;

        background-image: linear-gradient(
          to right,
          #7e9eff,
          #f2f7ff,
          #ffffff,
          #ffffff,
          #ffffff
        );
      }
      .text {
        font-size: 30rpx;
        line-height: 40rpx;
        color: #5f5f5f;
        text-indent: 2em;
      }
      .title {
        font-size: 25rpx;
        font-weight: 900;
        color: #333;
        margin-bottom: 15rpx;
      }
      .type {
        width: 100%;
        font-size: 20rpx;
        color: #5f5f5f;
        margin-top: 10rpx;
      }

      .image {
        display: flex;
        // align-items: center;
        // justify-content: center;
        margin: 20rpx 0;
        width: 100%;
        height: 1000rpx;
        background-size: cover;
      }
    }
  }
  .bottom {
    width: 100%;
    font-size: 20rpx;
    text-align: center;
  }
}
</style>
